/******************************************************************************
* File description: BaseButton.qml
* Function: 按钮基类
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-07
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import SvgImage 1.0

Rectangle {
    /* property 定义开始 */
    // 全局
    property var mobileDevice: ["android", "ios"] // 不带鼠标的设备
    property var pc_otherDevice: ["windows", "linux"] // 带鼠标的设备
    // 目前使用上边方法判断是否带鼠标（不准确）
    property bool hoverEnable: (mobileDevice.indexOf(Qt.platform.os) === -1) ? true : false
    // 布局
    property int labelPosition: GLOBAL.LabelPosition.Top // 默认左右布局
    property int gridRowCount: _getGirdRowNCol(labelPosition)[0]  // 网格布局行数
    property int gridColCount: _getGirdRowNCol(labelPosition)[1] // 网格布局列数
    property int rowSpacing: 0
    property int colSpacing: 0
    property int gridTopMargin: 0
    property int gridBottomMargin: 0
    property int gridLeftMargin: 0
    property int gridRightMargin: 0

    // 按钮
    // 按钮是否禁用
    property bool isEnable: true

    // 禁用状态
    // 禁用按钮图标
    property string disabledBtnIconPath: ""
    // 禁用按钮文字颜色
    property string disabledBtnTextColor: "#000"
    // 禁用按钮背景颜色
    property string disabledBtnColor: "#999"
    // 禁用按钮边框颜色
    property string disabledBtnBorderColor: "999"

    // 按钮宽度
    property int btnWidth: 10
    // 按钮高度
    property int btnHeight: 10
    // 按钮圆角
    property int btnRadius: 0
    // 按钮背景色
    property string btnColor: "skyblue"
    // 按钮边框宽度
    property int btnBorderWidth: 1
    // 按钮边框颜色
    property string btnBorderColor: "#000"
    // 按钮是否开启渐变
    property bool isGradient: false
    // 如果下边变量为true，则认为宽高相等
    property bool btnIsSquare: false
    // 是否充满（如果为 true 则定义宽高无效）
    property bool btnIsFillWidth: false
    property bool btnIsFillHeight: false
    // 是否溢出裁剪
    property bool btnIsClip: false

    // 图标
    // 按钮图标路径
    property url btnIconPath: ""
    // 按钮图标缩放规则
    property int btnIconAlignment: Image.PreserveAspectFit
    // 按钮图标大小
    property int btnIconWidth: 5
    property int btnIconHeight: 5
    // 图片宽高相等
    property bool btnIsIconSquare: btnIsSquare
    // 图片居中形式
    property int btnIconLayoutAlignment: Qt.AlignCenter // 水平垂直都居中
    // 是否充满（如果为 true 则定义宽高无效）
    property bool btnIsIconFillWidth: btnIsFillWidth
    property bool btnIsIconFillHeight: btnIsFillHeight
    // 是否为svg图片（默认为false）
    property bool isSvg: false

    // 文字
    // 按钮文字
    property string btnText: ""
    // 按钮文字颜色
    property string btnFontColor: "#FFF"
    // 按钮文字字体
    property string btnFontFamily: "Alibaba PuHuiTi"
    // 按钮文字大小
    property int btnFontPixelSize: 14
    // 按钮文字是否加粗
    property bool isBtnFontBold: false
    // 按钮标签宽度
    property int btnLabelWidth: 10
    // 按钮标签高度
    property int btnLabelHeight: 10
    // 按钮标签可见性
    property bool btnLabelIsVisible: true
    // 控制文字位置
    property int btnFontVerAlign: Text.AlignVCenter // 默认居中
    property int btnFontHorAlign: Text.AlignHCenter // 默认居中
    // 控制文字省略样式
    property int btnTextElideMode: Text.ElideNone // 默认不省略
    // 文字宽高相等
    property bool btnIsLabelSquare: btnIsSquare
    // 是否充满（如果为 true 则定义宽高无效）
    property bool btnIsLabelFillWidth: btnIsFillWidth
    property bool btnIsLabelFillHeight: btnIsFillHeight

    // 函数
    /*
      获取网格布局行列数
      @param {int} labelPosition 布局方式
      @return {list<int, int>} 网格布局行列数: [row, col]
     */
    property var _getGirdRowNCol: function(labelPosition){
        // 左右布局
        if(labelPosition === GLOBAL.LabelPosition.Left){
            return [1, 2]
        }
        // 上下布局
        else if(labelPosition === GLOBAL.LabelPosition.Top){
            return [2, 1]
        }
    }
    /* property 定义结束 */

    id: root
    width: btnWidth
    height: btnHeight
    // 适配开启Layout布局的大小
    Layout.preferredWidth: btnWidth
    Layout.preferredHeight: btnHeight
    // 如果开启渐变则不加颜色
    color: isGradient ? "transparent" : isEnable ? btnColor : disabledBtnColor
    border.width: btnBorderWidth
    border.color: isEnable ? btnBorderColor : disabledBtnBorderColor
    radius: btnRadius

    // 图标和按钮文字
    GridLayout {
        anchors {
            fill: parent
            topMargin: gridTopMargin
            bottomMargin: gridBottomMargin
            leftMargin: gridLeftMargin
            rightMargin: gridRightMargin
        }
        rows: gridRowCount
        columns: gridColCount
        rowSpacing: rowSpacing
        columnSpacing: colSpacing

        // 图片
        Image {
            id: btnImage
            enabled: !isSvg // 如果为svg图片，则使用下边的svg渲染
            visible: !isSvg
            source: isEnable ? btnIconPath : disabledBtnIconPath
            fillMode: btnIconAlignment
            asynchronous: true
            smooth: true
            mipmap: true
            // 如果为 true，则设定宽高无效（默认为false）
            Layout.fillWidth: btnIsIconFillWidth
            Layout.fillHeight: btnIsIconFillHeight
            Layout.preferredWidth: btnIconWidth
            // 如果btnIconIsSquare为true，则宽高相等
            Layout.preferredHeight: btnIsIconSquare ? btnIconWidth : btnIconHeight
            Layout.alignment: btnIconLayoutAlignment
        }

        // svg图片
        Item {
            visible: isSvg
            // 如果为 true，则设定宽高无效（默认为false）
            Layout.fillWidth: btnIsIconFillWidth
            Layout.fillHeight: btnIsIconFillHeight
            Layout.preferredWidth: btnIconWidth
            // 如果btnIconIsSquare为true，则宽高相等
            Layout.preferredHeight: btnIsIconSquare ? btnIconWidth : btnIconHeight
            Layout.alignment: btnIconLayoutAlignment

            SvgImage {
                id: btnSVGImage
                enabled: isSvg // 如果为普通图片，则使用上边的图片渲染
                anchors.fill: parent
                source: isEnable ? btnIconPath : disabledBtnIconPath
                anchors.top: parent.top
                anchors.left: parent.left
            }
        }

        Label {
            id: btnContents
            // 如果为 true，则设定宽高无效（默认为false）
            Layout.fillWidth: btnIsLabelFillWidth
            Layout.fillHeight: btnIsLabelFillHeight
            Layout.preferredWidth: btnLabelWidth
            // 如果btnLabelIsSquare为true，则宽高相等
            Layout.preferredHeight: btnIsLabelSquare ? btnLabelWidth : btnLabelHeight
            text: qsTr(btnText)
            color: isEnable ? btnFontColor : disabledBtnTextColor
            font.family: btnFontFamily
            font.pixelSize: btnFontPixelSize
            font.bold: isBtnFontBold
            antialiasing: true
            // 控制文字位置
            verticalAlignment: btnFontVerAlign
            horizontalAlignment: btnFontHorAlign
            // 文字省略
            elide: btnTextElideMode
            // 可见性
            visible: btnLabelIsVisible
        }
    }
}
